<!DOCTYPE html>
<html lang="zh">
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/header :: header(~{::title},~{::link},~{})">
    <title>临窗旋墨-留言板</title>
    <link rel="stylesheet" th:href="@{/css/jianshu.css}"/>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="stylesheet" th:href="@{/css/comments.css}">
</head>
<body class="body">
<!--导航-->
<div th:replace="common/nav :: nav(true)"></div>
<div class="container-fluid">
    <div class="row">
        <div style="margin-top: 20px;"></div>
        <div class="col-lg-1 col-md-1 col-sm-1">

        </div>

        <div class="col-lg-8 col-md-8 col-sm-8">

            <!--提交评论的form-->
            <div class="comments-form" id="main-comment">
                <div class="comments-form-left">
                    <img th:if="${session.principal == null}" class="img-circle"
                         th:src="@{/assets/img/avatar-default.png}"/>
                    <img th:if="${session.principal}" class="img-circle" th:src="${session.principal.avatar}"/>
                    <div th:if="${session.principal}" class="text-primary" th:text="${session.principal.nickname}">狂徒张三</div>
                </div>
                <div class="comments-form-right">
                    <textarea autoheight="true" placeholder="请输入你的留言..."></textarea>
                    <div class="comments-form-right-footer">
                        <button th:if="${session.principal}" class="btn btn-info btn-xs comments-submit"
                                data-replay="0" data-atid="0">提交评论
                        </button>
                        <button th:if="${session.principal==null}" class="btn btn-default btn-xs" disabled>请先登录</button>
                    </div>
                </div>

                <div class="clearfix"></div>
            </div>

            <hr/>
            <!--主评论列表-->
            <div class="comments-box">
                <div th:each="data:${pager.datas}" class="comments-item">
                    <div class="comments-item-left">
                        <img class="img-circle" th:src="${data.avatar}"/>
                    </div>
                    <div class="comments-item-right">
                        <div class="comments-item-right-header">
                            <strong class="text-info" th:text="${data.nickname}">张三</strong><small class="text-muted">发表于</small>
                            <span th:text="${#dates.format(data.createTime, 'yyyy-MM-dd HH:mm')}">创建时间</span>
                        </div>
                        <div class="comments-item-right-content">
                            <p th:text="${data.content}"></p>
                        </div>
                        <div class="comments-item-right-footer">
                            <!--主评论的 回复的replyId = 当前id; atId=当前id-->
                            <a th:if="${session.principal}" class="btn-link btn-xs replay"
                               th:attr="data-reply=${data.id},data-atid=${data.id}">回复</a>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                    <div class="comments-sub-box">
                        <!-- 评论的回复 列表（子评论列表） -->
                        <div class="comments-sub-item" th:if="${data.subComments}"
                             th:each="sub:${data.subComments.datas}">
                            <div class="comments-item-left">
                                <img class="img-circle" th:src="${sub.avatar}"/>
                            </div>
                            <div class="comments-item-right">
                                <div class="comments-item-right-header">
                                    <strong class="text-info" th:text="${sub.nickname}">张三</strong><small
                                        class="text-muted">发表于</small>
                                    <span th:text="${#dates.format(sub.createTime, 'yyyy-MM-dd HH:mm')}">创建时间</span>
                                </div>
                                <div class="comments-item-right-content">
                                    <p th:text="${sub.content}"></p>
                                </div>
                                <div class="comments-item-right-footer">
                                    <!--回复的 回复的replyId = 当前replyId; atId=当前id-->
                                    <a th:if="${session.principal}" class="btn-link btn-xs replay"
                                       th:attr="data-reply=${sub.replyId},data-atid=${sub.id}">回复</a>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                        </div>

                        <div th:if="${data.subComments != null and data.subComments.hasMore}"
                             th:attr="data-page=${data.subComments.page +1},data-id=${data.id}"
                             class="load-more">
                            加载更多
                        </div>
                    </div>


                </div>
            </div>

            <!--页码相关-->
            <div th:replace="common/pager :: pager"></div>
        </div>

        <div th:replace="common/right :: right"></div>

    </div>
</div>
<!-- 引入通用js-->
<div th:replace="common/footer :: footer"></div>
<script th:inline="javascript">

    /*<![CDATA[*/

    var user =/*[[${session.principal}]]*/

        /*]]>*/
        $(function () {
            loadMoreEvent();
            replyEvent();
            commentsEvent();

        });

    // 加载更多子回复事件
    function loadMoreEvent() {
        $("div.load-more").on("click", function () {
            var data = $(this).data();
            var $more = $(this)
            //找到列表所在div
            var $box = $more.closest(".comments-sub-box");
            //找到模版
            var $temp = $more.prev("div");
            var url = ctx + "commentMore"
            $.ajax(url, {
                type: "post",
                dataType: "json",
                data: data
            }).done(function (res) {
                if (res.code != 0) {
                    console.info(res.msg);
                    return;
                }
                var pager = res.data;
                pager.datas.forEach(function (item) {
                    var $comment = $temp.clone(true);
                    $comment.find("img").attr("src", item.avatar);
                    $comment.find(".comments-item-right-header strong").text(item.nickname);
                    $comment.find(".comments-item-right-header span").text(item.createTime);
                    $comment.find("p").text(item.content);
                    // data-reply=${sub.replyId},data-atid   (replyId 原来模版中就存在)
                    $comment.find(".replay").data("atid", item.id);
                    $more.before($comment);

                });
                if (pager.hasMore) {
                    $more.data("page", (pager.page + 1));
                } else {
                    $more.remove();
                }
            });
        })
    }

    //提交评论按钮事件绑定
    function commentsEvent() {
        $("button.comments-submit").on("click", function () {
            $(this).prop("disabled", true);
            var $textArea = $(this).closest(".comments-form").find("textarea");
            if ($textArea.length == 0 || !$textArea.val()) {
                return;
            }
            var data = {
                content: $textArea.val(),
                replyId: $textArea.data("reply"),
                atId: $textArea.data("atid"),
                userId:user.id
            };
           var url = ctx + "saveComment";
           $.ajax(url,{
               type: "post",
               dataType: "json",
               data: data
           }).done(function(res){
               window.location.reload();
           });
        });
    }


    // 点击回复按钮事件绑定
    function replyEvent() {
        //点击回复按钮
        $("a.replay").on("click", function () {
            var className = "relation-replay";
            var $replayBtn = $(this);
            var $commentsForm = $replayBtn.closest(".comments-sub-item,.comments-item").children("." + className);
            if ($commentsForm.length == 0) {
                $commentsForm = $("#main-comment").clone(true).attr("id", "");
                var $textArea = $commentsForm.find("textarea").val("");
                //绑定相关数据
                $textArea.data("reply", $replayBtn.data("reply")).data("atid", $replayBtn.data("atid"));
                $("img", $commentsForm).attr("src", user.avatar);
                $commentsForm.addClass(className);
                $replayBtn.closest(".comments-sub-item,.comments-item").children(".clearfix").after($commentsForm);
                $replayBtn.text("收起")
            } else {
                $commentsForm.toggle("fast", "linear", function () {
                    $commentsForm.find("textarea").val("");
                    $replayBtn.text("收起" == $replayBtn.text() ? "回复" : "收起")
                })
            }
            $commentsForm.find("textarea").focus();

        });
    }

</script>
</body>
</html>
